import { Tooltip } from 'antd';
import './index.scss'
import type React from 'react'
import { useRef, useState } from 'react';
import classNames from 'classnames';

type propsT = {
    placeholder?:string,
    onChange?:Function,
    id?:string,
    children?:React.ReactNode,
    className?:string,
    value:string | number,
    resize?:'none'|'both'|'horizontal'|'vertical',
    options:{value:string|number,label:string}[],
}

function MySelect(props:propsT){
    const [selectVal, setSelectVal] = useState<string|number>('')
    const [activeOptions, setActiveOptions] = useState<boolean>(false)
    const optionsRef = useRef<HTMLDivElement>(null)

    function handleChange(value:string|number){
        if(props.onChange){
            props.onChange(value,props.id)
        }
    }

    function handleShowOptions(e:React.MouseEvent<HTMLDivElement>){
        e.stopPropagation()
        setActiveOptions(!activeOptions)
        if(!optionsRef.current) return
        
        const target = e.currentTarget as HTMLDivElement

        const rect = target.getBoundingClientRect()
        optionsRef.current.style.display = optionsRef.current.style.display=='flex'? 'none' : 'flex'
        optionsRef.current.focus()
        optionsRef.current.style.left = rect.left + 'px'
        optionsRef.current.style.width = target.clientWidth + 'px'
    }

    function handleOptionsClose(){
        if(!optionsRef.current) return
        optionsRef.current.style.display = 'none'
        setActiveOptions(false)
    }

    function selectOption(e:React.MouseEvent<HTMLDivElement>,value:string|number){
        e.stopPropagation()
        if(!optionsRef.current) return
        console.log(value);
        
        setSelectVal(value)
        setActiveOptions(false)
        handleChange(value)
        
        optionsRef.current.style.display = 'none'
    }

    function setVal(){
        if(props.value || props.value === 0 || props.value === ''){
            return props.options.find(option=>option.value === props.value)?.label 
        }else{
            return selectVal
        }
    }
    return (
        <>
            <div 
                className='mySelect_select_wrapper' 
                onClick={(e)=>handleShowOptions(e)}
            >
                <div 
                    className={
                        classNames(
                            "mySelect_select",
                            {'mySelect_select_active':activeOptions}
                        )} 
                    id={props.id}
                >
                    {setVal()?
                    <div 
                        className="mySelect_select_input" 
                        tabIndex={0} 
                    >
                        <span>{setVal()}</span>
                    </div>:
                    <div 
                        className="mySelect_select_placeholder" 
                        tabIndex={0}
                    >
                        <span>{props.placeholder?props.placeholder:'请选择...'}</span>
                    </div>}
                </div>
                {props.children}
            </div>
            <div 
                className="mySelect_select_options" 
                ref={optionsRef} 
                tabIndex={1} 
                onBlur={handleOptionsClose}
            >
                {props.options.length == 0 ? 
                <div className='mySelect_select_empty'>暂无数据</div>:
                props.options.map((item, index) => ( 
                    <Tooltip title={item.label} key={index}>
                        <div className="mySelect_select_option" data-value={item.value} onClick={(e)=>selectOption(e, item.value)}>
                            <span>{item.label}</span>
                        </div>
                    </Tooltip>
                ))}
            </div>
        </>
    )
}

export default MySelect